<template>
  <view class="container">
    <!-- 步骤指示器 -->
    <view class="steps">
      <view class="step-item active">
        <view class="step-num step-num-gray">1</view>
        <view class="step-text step-text-gray">第一步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-blue">2</view>
        <view class="step-text step-text-blue">第二步</view>
      </view>
      <view class="step-line"></view>
      <view class="step-item">
        <view class="step-num step-num-gray">3</view>
        <view class="step-text step-text-gray">第三步</view>
      </view>
    </view>

    <!-- 心理中心教师选择 -->
    <view class="teacher-select-section">
      <view class="section-title">2.请选择对口心理中心教师(单选)</view>
      <view class="teacher-buttons">
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '邱秀英' }" @click="selectTeacher('邱秀英')">
          <view class="teacher-initial">邱</view>
          <view class="teacher-name">邱秀英</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '锺静' }" @click="selectTeacher('锺静')">
          <view class="teacher-initial">锺</view>
          <view class="teacher-name">锺静</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '赖娟' }" @click="selectTeacher('赖娟')">
          <view class="teacher-initial">赖</view>
          <view class="teacher-name">赖娟</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '叶军' }" @click="selectTeacher('叶军')">
          <view class="teacher-initial">叶</view>
          <view class="teacher-name">叶军</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '江洋' }" @click="selectTeacher('江洋')">
          <view class="teacher-initial">江</view>
          <view class="teacher-name">江洋</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '徐洋' }" @click="selectTeacher('徐洋')">
          <view class="teacher-initial">徐</view>
          <view class="teacher-name">徐洋</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '阎敏' }" @click="selectTeacher('阎敏')">
          <view class="teacher-initial">阎</view>
          <view class="teacher-name">阎敏</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '薛艳' }" @click="selectTeacher('薛艳')">
          <view class="teacher-initial">薛</view>
          <view class="teacher-name">薛艳</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '郑霞' }" @click="selectTeacher('郑霞')">
          <view class="teacher-initial">郑</view>
          <view class="teacher-name">郑霞</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '郭秀兰' }" @click="selectTeacher('郭秀兰')">
          <view class="teacher-initial">郭</view>
          <view class="teacher-name">郭秀兰</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '熊明' }" @click="selectTeacher('熊明')">
          <view class="teacher-initial">熊</view>
          <view class="teacher-name">熊明</view>
        </button>
        <button class="teacher-btn" :class="{ 'active': selectedTeacher === '郭超' }" @click="selectTeacher('郭超')">
          <view class="teacher-initial">郭</view>
          <view class="teacher-name">郭超</view>
        </button>
      </view>

      <view class="default-send">
        <view class="default-send-title">默认发送</view>
        <view class="default-send-tags">
          <view class="tag">熊</view>
          <view class="tag">熊</view>
          <view class="tag">熊</view>
          <view class="tag">熊</view>
          <view class="tag">熊</view>
          <view class="tag">熊</view>
        </view>
        <view class="default-send-desc">学工部张钊副部长、学工部房海宁副部长、学院副书记、学工部刘元印、学工办主任、心理中心教师孙灯勇</view>
      </view>
    </view>

    <!-- 选定学生部分 -->
    <view class="student-select-section">
      <view class="section-title">3.选定学生</view>
      <view class="student-operate-buttons">
        <button class="student-btn" :class="{ 'active-btn': formType === 'search' }" @click="formType = 'search'">搜索学生选定</button>
        <button class="student-btn" :class="{ 'active-btn': formType === 'blank' }" @click="formType = 'blank'">新增空白表单</button>
      </view>

      <!-- 搜索学生选定表单 -->
      <view v-if="formType === 'search'">
        <view class="search-input">
          <input type="text" placeholder="请输入姓名、学号模糊查询" v-model="searchKeyword" />
        </view>
        <view class="added-students-title">已添加学生</view>

        <view class="student-item">
          <view class="student-basic">
            <view class="student-name">晓波</view>
            <view class="student-id">2020090911004</view>
          </view>
          <button class="delete-btn" @click="deleteStudent(0)">
            <image src="/static/delete.png" mode="aspectFit" />
          </button>
        </view>

        <view class="student-detail">
          <view class="detail-item">
            <view class="detail-label">身份证号：</view>
            <view class="detail-value">510000000000000000</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">性别：</view>
            <view class="detail-value">男</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">家庭住址：</view>
            <view class="detail-value">某某省某某市某某区某某街某某路XXXX号</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">学院：</view>
            <view class="detail-value">某某学院</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">专业班级：</view>
            <view class="detail-value">A专业、A班级</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">寝室：</view>
            <view class="detail-value">A园区、A栋、A单元、501</view>
          </view>
          <view class="detail-item">
            <view class="detail-label">辅导员：</view>
            <view class="detail-value">A辅导员</view>
          </view>
        </view>

        <view class="student-item">
          <view class="student-basic">
            <view class="student-name">3.张晓波</view>
            <view class="student-id">2020090911004</view>
          </view>
          <button class="arrow-btn">
            <image src="/static/arrow.png" mode="aspectFit" />
          </button>
        </view>
      </view>

      <!-- 新增空白表单 -->
      <view v-else>
        <view class="form-item">
          <view class="form-label">请选择学生类型</view>
          <select class="form-input" v-model="studentForm.type">
            <option value="">请选择</option>
            <option value="type1">本科生</option>
            <option value="type2">研究生</option>
          </select>
        </view>
        <view class="form-item">
          <view class="form-label">姓名：</view>
          <input type="text" class="form-input" placeholder="请输入姓名" v-model="studentForm.name" />
        </view>
        <view class="form-item">
          <view class="form-label">身份证号：</view>
          <input type="text" class="form-input" placeholder="请输入身份证号" v-model="studentForm.idCard" />
        </view>
        <view class="form-item">
          <view class="form-label">性别：</view>
          <select class="form-input" v-model="studentForm.gender">
            <option value="">请选择性别</option>
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </view>
        <view class="form-item">
          <view class="form-label">家庭住址：</view>
          <select class="form-input short-input" v-model="studentForm.region">
            <option value="">请选择省市区县</option>
            <option value="region1">四川省成都市</option>
            <option value="region2">北京市海淀区</option>
          </select>
          <input type="text" class="form-input long-input" placeholder="请输入详细地址" v-model="studentForm.address" />
        </view>
        <view class="form-item">
          <view class="form-label">学院：</view>
          <select class="form-input" v-model="studentForm.college">
            <option value="">请选择学院</option>
            <option value="college1">计算机学院</option>
            <option value="college2">商学院</option>
          </select>
        </view>
        <view class="form-item">
          <view class="form-label">专业：</view>
          <select class="form-input" v-model="studentForm.major">
            <option value="">请选择专业</option>
            <option value="major1">软件工程</option>
            <option value="major2">会计学</option>
          </select>
        </view>
        <view class="form-item">
          <view class="form-label">班级：</view>
          <input type="text" class="form-input" placeholder="请输入班级" v-model="studentForm.class" />
        </view>
        <view class="form-item">
          <view class="form-label">寝室：</view>
          <input type="text" class="form-input" placeholder="请输入寝室" v-model="studentForm.dormitory" />
        </view>
        <view class="form-item">
          <view class="form-label">辅导员：</view>
          <input type="text" class="form-input" placeholder="请输入辅导员姓名" v-model="studentForm.counselor" />
        </view>
      </view>

      <view class="auto-save-tip">已为您实时保存数据</view>
    </view>

    <!-- 底部固定按钮区域 -->
    <view class="jin"></view>
    <view class="fixed-bottom-buttons">
      <button class="back-btn" @click="navigateBack">返回上一步</button>
      <button class="save-btn" @click="saveDraft">保存草稿</button>
      <button class="next-btn" @click="navigateNext">下一步</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 路由实例
const router = useRouter();

// 表单类型（搜索/空白）
const formType = ref('search');

// 选中的教师
const selectedTeacher = ref('叶军');

// 搜索关键词
const searchKeyword = ref('');

// 学生表单数据
const studentForm = ref({
  type: '',
  name: '',
  idCard: '',
  gender: '',
  region: '',
  address: '',
  college: '',
  major: '',
  class: '',
  dormitory: '',
  counselor: ''
});

// 选择教师
const selectTeacher = (teacherName) => {
  selectedTeacher.value = teacherName;
};

// 删除学生
const deleteStudent = (index) => {
  // 实际项目中这里应该有删除逻辑
  uni.showToast({
    title: '已删除',
    icon: 'none'
  });
};

// 返回上一步
const navigateBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 保存草稿
const saveDraft = () => {
  // 保存逻辑
  uni.showToast({
    title: '草稿已保存',
    icon: 'success'
  });
};

// 下一步
const navigateNext = () => {
  // 验证逻辑
  if (!selectedTeacher.value) {
    uni.showToast({
      title: '请选择心理中心教师',
      icon: 'none'
    });
    return;
  }

  // 跳转页面
  uni.navigateTo({
    url: '/pages/index/index_tufa',
    fail: (err) => {
      console.error('页面跳转失败:', err);
      uni.showToast({
        title: '跳转失败，请检查页面路径',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
.container {
  background-color: #fff;
  min-height: 210vh;
  box-sizing: border-box;
  padding-bottom: 140rpx; /* 为底部固定按钮留出空间 */
}

/* 事件上报标题栏 */
.event-title-bar {
  background-color: #007aff;
  padding: 30rpx 0;
  text-align: center;
  width: 100%;
}

.event-title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
}

.steps {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 20px;
  width: 90%; /* 步骤条整体宽度缩短为原来的90% */
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1.1); /* 步骤项整体放大10% */
}

.step-num {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #007aff;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-num-gray {
  width: 26.4px; /* 原24px放大10% */
  height: 26.4px; /* 原24px放大10% */
  border-radius: 50%;
  background-color: #cccccc;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.4px; /* 原4px放大10% */
}

.step-text {
  font-size: 12px;
  color: #333333;
}

.step-text-blue {
  font-size: 12px;
  color: #007aff; /* 第一步文字改为蓝色 */
}

.step-text-gray {
  font-size: 12px;
  color: #cccccc;
}

.step-line {
  flex: 1;
  height: 1px;
  background-color: #cccccc;
  margin: 0 8px; /* 步骤线之间的间距缩短 */
}

/* 通用标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx 0 30rpx;
  color: #333;
  padding-left: 10rpx;
}

/* 教师选择区域 */
.teacher-select-section {
  margin-bottom: 40rpx;
  padding: 0 15rpx;
}

.teacher-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15rpx;
}

.teacher-btn {
  width: calc(50% - 10rpx);
  margin-bottom: 10rpx;
  padding: 20rpx 10rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: 28rpx;
}

.teacher-btn.active {
  border-color: #007aff;
  background-color: rgba(0, 122, 255, 0.05);
}

.teacher-initial {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #007aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-right: 15rpx;
}

.teacher-name {
  font-size: 28rpx;
  color: #333;
}

/* 默认发送区域 */
.default-send {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
}

.default-send-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.default-send-tags {
  display: flex;
  margin-bottom: 15rpx;
  flex-wrap: wrap;
  gap: 0rpx;
}

.tag {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #007aff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.default-send-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
  text-align: justify;
}

/* 学生选择区域 */
.student-select-section {
  margin-bottom: 30rpx;
  padding: 0 15rpx;
}

.student-operate-buttons {
  display: flex;
  margin-bottom: 30rpx;
  gap: 20rpx;
}

.student-btn {
  flex: 1;
  padding: 22rpx 0;
  border: 2rpx solid #007aff;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #007aff;
  background-color: #fff;
}

.active-btn {
  background-color: #007aff;
  color: #fff;
}

/* 搜索框样式 */
.search-input input {
  width: 100%;
  padding: 22rpx 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

/* 已添加学生样式 */
.added-students-title {
  font-size: 28rpx;
  color: #666;
  margin: 30rpx 0 15rpx;
  font-weight: 500;
}

.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.student-basic {
  display: flex;
  flex-direction: column;
}

.student-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 5rpx;
}

.student-id {
  font-size: 26rpx;
  color: #666;
}

.delete-btn, .arrow-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.delete-btn image, .arrow-btn image {
  width: 36rpx;
  height: 36rpx;
}

/* 学生详情样式 */
.student-detail {
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 8rpx;
  margin: 15rpx 0 30rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 20rpx;
  flex-wrap: wrap;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  font-size: 26rpx;
  color: #666;
  width: 140rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

/* 表单样式 */
.form-item {
  margin-bottom: 25rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.form-input {
  width: 100%;
  padding: 22rpx 20rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: #fff;
}

.short-input {
  width: 30%;
  margin-right: 20rpx;
}

.long-input {
  width: calc(70% - 20rpx);
}

/* 自动保存提示 */
.auto-save-tip {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin: 40rpx 0 20rpx;
}

/* 底部固定按钮 */
.fixed-bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-top: 2rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
}

.back-btn, .save-btn, .next-btn {
  padding: 22rpx 0;
  border-radius: 8rpx;
  font-size: 30rpx;
  font-weight: 500;
}

.back-btn {
  width:100%;
  flex: 1;
  background-color: #ffffff;
  color:#1677ff;
  border: 2rpx solid #007aff ;
  margin-right: 15rpx;
  bottom:50px;
  position:absolute;
  z-index: 2;
  left:0px;
}

.save-btn {
  width:100%;
  position:absolute;
  flex: 1;
  background-color: #fff;
  color: #007aff;
  border: 2rpx solid #007aff;
  margin-right: 15rpx;
  bottom:0px;
  z-index: 2;
  left:0px;
}

.next-btn {
  position:absolute;
  bottom:100px;
  flex: 1;
  background-color: #007aff;
  color: #fff;
  border: none;
  width:100%;
  z-index: 2;
  left:0px;
}

/* 修复按钮默认样式 */
button {
  line-height: normal;
}

button::after {
  border: none;
}
.jin{
  position:fixed;
  width:100%;
  height:150px;
  background-color: #ffffff;
  z-index: 1;
  bottom:0px;
}
</style

